<template>
  <div class="page">
    <c-title :hide="false" text="爱心公益"></c-title>
    <div class="top">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in pricList" :key="index"><img :src="item.thumb" /></van-swipe-item>
      </van-swipe>
    </div>

    <div class="content">
      <h3>最 新 动 态</h3>
      <van-swipe-item v-for="(item, index) in wzList" :key="index">
        <van-col span="4" style="float: left">{{ item.title }}</van-col>
        <van-col span="4" style="float: right" class="xq" @click="xq(item.id)">查看详情</van-col>
      </van-swipe-item>
    </div>

    <div class="bottom">
      <h3>公益活动</h3>
      <div v-for="(item, index) in list" :key="index">
        <img :src="item.img" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dtList: [],
      list: [{ img: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" }, { img: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" }],
      pricList: [],
      article_id: ""
    };
  },
  activated() {
    this.getLsit();
  },
  methods: {
    xq(act_id) {
      this.$router.push(this.fun.getUrl("wzxq", {}, { act_id }));
    },
    getLsit() {
      // 获取图片
      $http
        .post("plugin.store-cashier.frontend.store.store-picture.get-list", {
          category_id: 4,
          store_id: 27
        })
        .then(response => {
          this.pricList = response.json;
        });
      // 文章列表
      $http
        .post("plugin.store-cashier.frontend.store.store-article.get-list", {
          category_id: 4,
          store_id: 27
        })
        .then(response => {
          this.dtList = response.json;
          console.log(this.dtList);
        });
    }
  }
};
</script>
<style scoped lang="scss">
.my-swipe .van-swipe-item {
  img {
    height: 10rem;
    width: 100%;
  }
}
.content {
  margin: 0.5rem 0rem;
  border-radius: 1rem;
  padding: 1rem;
  .xq {
    color: #1989fa;
  }
  .van-row {
    margin-bottom: 1rem;
  }
}
.bottom {
  h3 {
    margin: 1rem 18rem 0.5rem 0rem;
    font-size: 1rem;
  }
  img {
    padding: 0.1rem;
    border-radius: 1rem;
    width: 100%;
    height: 11rem;
  }
}
</style>